import React, { useState,useEffect } from 'react';
import { Transfer,Button,message } from 'antd';
import '@/assets/style/components.less'
import { ConsoleSqlOutlined } from '@ant-design/icons';
export default function transfer(props:any) {
    const [transferList,setTransferList] = useState([])
    const [targetKeys, setTargetKeys] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([])
    const [title,setTitle] = useState([])
    const [rightList,setRightList]:any = useState([])
    const [listStyle,setListStyle] = useState({})
   useEffect(()=>{
    if(props.data && props.data.length){
        setTitle(props.title)
        setTransferList(props.data)
        setListStyle(props.listStyle)
    }
   },[props.data])
    // 选项在两栏转移之后的回调 
      const onChange = (nextTargetKeys:any, direction:any, moveKeys:any) => {
          console.log(nextTargetKeys,123)
        let time:any = []
        let arr = nextTargetKeys.map((el:any) =>{
            let list = transferList.filter((t:any)=>t.key == el)
            if(list.length > 0){
                time.push(list[0])
            }
            
        })
        setRightList(time)
        setTargetKeys(nextTargetKeys);
      };
    // 选中项改变时候触发的 sourceSelectedKeys 左侧数据选中后返回的数组 targetSelectedKeys 右侧选中后返回的数组
      const onSelectChange = (sourceSelectedKeys:any, targetSelectedKeys:any) => {
        // console.log('选中项改变触发的')
        // console.log('sourceSelectedKeys:', sourceSelectedKeys);
        // console.log('targetSelectedKeys:', targetSelectedKeys);
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
      };
      useEffect(()=>{
        props.chooseList(rightList)
      },[rightList])
     // 选项列表滚动触发的   direction 滚动的是哪边的数据 e 当前数据的dom
    //   const onScroll = (direction:any, e:any) => {
    //     console.log('direction:', direction);
    //     console.log('target:', e.target);
    //   };

    const renderItem = (item:any,) => {
        const value = {
            ...item
        }
       
        return (
        <div onClick={(e)=>e.stopPropagation()}>
             {targetKeys.includes(item.key)?<span className="custom-item">
                <strong>{item.title}</strong>
                <Button onClick={()=>itemGoUp(value)} size="small">上移</Button>
                <Button onClick={()=>itemGoDown(value)} size="small">下移</Button>
                <Button onClick={()=>itemDelete(value)} size="small">删除</Button>
            </span>:<span className="custom-item">
            <strong>{item.title}</strong>
            </span>}
        </div>
        );
    }
    function itemGoUp(item:any){
        let rightlist = [...rightList]
        for(let i=0;i<rightlist.length;i++){
            if(rightlist[i].key == item.key){
                if(i === 0){
                    return message.warning('已经是第一个了')
                }
                rightlist[i] = rightlist.splice(i - 1, 1, rightlist[i])[0]
            }
        }
        let keys:any = []
        rightlist.map((el:any) =>{
            return keys.push(el.key)
        })
        setRightList(rightlist)
        setTargetKeys(keys)
               
    }
    function itemGoDown(item:any){
        console.log(item)
        let rightlist = [...rightList]
        for(let i=0;i<rightlist.length;i++){
            if(rightlist[i].key == item.key){
                if(i === rightlist.length-1){
                    return message.warning('已经是最后一个了')
                }
                rightlist[i] = rightlist.splice(i+1,1,rightlist.splice(i,1,rightlist[i+1]))
                // let item = {...rightlist[i]}
                // rightlist[i] = rightlist[i+1]
                // rightlist[i+1] = item
                // rightlist[i] = rightlist.splice(i + 1, 1, rightlist[i])[0]
            }
        }
        let otherList = []
        rightlist.map((ele:any)=>{
            console.log(Array.isArray(ele))
            if(Array.isArray(ele)){
                otherList.push(ele[0])
            } else {
                otherList.push(ele)
            }
        }) 
        console.log(otherList)
        let keys:any = []
        otherList.map((el:any) =>{
            return keys.push(el.key)
        })
        setRightList(otherList)
        setTargetKeys(keys)
    }
    function itemDelete(item:any){
        let rightlist = [...rightList]
        for(let i=0;i<rightlist.length;i++){
            if(rightlist[i].key == item.key){
                rightlist.splice(i , 1)
            }
        }
        let keys:any = []
        rightlist.map((el:any) =>{
            return keys.push(el.key)
        })
        setRightList(rightlist)
        setTargetKeys(keys)
    }
  return (
    <div>
        <Transfer
            dataSource={transferList} //  需要穿梭的数据总集
            titles={title}  //  穿梭框的头部名称
            targetKeys={targetKeys} // 右侧选中的keys
            listStyle={listStyle}     
            selectedKeys={selectedKeys} // 左侧选中的keys
            onChange={onChange}
            onSelectChange={onSelectChange}
            // onScroll={onScroll}
            render={renderItem}
            />
    </div>
  )
}
